<!--
 * @Description: 文件描述
 * @Version: 1.0
 * @Author: YueXuanzi
 * @Date: 2024-09-09 14:42:20
 * @LastEditors: YueXuanzi
 * @LastEditTime: 2024-10-04 22:34:40
 * @心得体会: 无
-->
<template>
    <el-scrollbar style="height: 89vh;">
        <div class="w-full" >
            <div class="w-full h-80 mb-6">
                <el-carousel height="320px">
                    <el-carousel-item v-for="item in bgimages" :key="item">
                        <el-image :src="item" fit="cover" class="w-full h-full"/>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="w-full h-20">
                <div class="text-green-400 text-5xl font-bold text-center w-full">健康是我们的共同追求</div>
                <div class="text-center text-gray-400 w-full">健康来源于呵护关爱生命，你我同心，健康同行</div>
            </div>
            <div class="w-full h-80 flex justify-between items-start pt-0">
                <div ref="chart" class="w-1/3 min-w-80 h-100 bg-blue-300 m-1"></div>
                <div ref="chart2" class="w-1/3 min-w-80 h-100 bg-blue-300 m-1"></div>
                <div ref="chart3" class="w-1/3 min-w-80 h-100 bg-blue-300 m-1"></div>
            </div>
        </div>
    </el-scrollbar>
    
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onMounted } from '@vue/runtime-core';
// 引入echarts
import * as echarts from 'echarts'
import { getDeptCount } from '@/api/sys/echart.js'
const bgimages = ref([
    new URL('../../assets/img/a.png', import.meta.url).href,
    new URL('../../assets/img/b.png', import.meta.url).href,
    new URL('../../assets/img/c.png', import.meta.url).href,
])
const chart = ref(null)
const chart2 = ref(null)
const chart3 = ref(null)
var option;
var option2;
var option3;

onMounted(() => {
    init()
})
async function init(){
    let myChart = echarts.init(chart.value)
    let myChart2 = echarts.init(chart2.value)
    let myChart3 = echarts.init(chart3.value)
    let data1;
    await getDeptCount().then(res =>{
        console.log(res)
        data1 = res.data
    })
    // 获取数据
    option = {
        title: {
            text: '\n各科室医生数量统计',
            // subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: data1,
            emphasis: {
                itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
            }
        ]
        };
    option2 ={
        title: {
            text: '\n近日预约量统计',
            left: 'center'
        },
        xAxis: {
            type: 'category',
            data: ['01', '02', '04', '07', '08', '09', '10','11','12']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data:[1, 3, 2, 1, 1, 2,3, 5, 1],
            type: 'line'
            }
        ]
    }
    option3 = {
        title: {
            text: '\n各项数据统计',
            left: 'center'
        },
        xAxis: {
            type: 'category',
            data: ['医生数量','挂号量','用户数量','项目数量']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: [15, 23, 22, 15],
            type: 'bar'
            }
        ]
    };
    myChart.setOption(option)
    myChart2.setOption(option2)
    myChart3.setOption(option3)
}

</script>

<style scoped>

</style>